<script setup>
	import HomePanel from './HomePanel.vue'
	import {getGoodsAPI} from '@/apis/home'
	import {onMounted,ref} from 'vue'
	import GoodsItem from './GoodsItem.vue'
	import {useshopProduct} from '@/stores/shopProduct'
	
	const shopProduct=useshopProduct()
	
	onMounted(() => {
		shopProduct.getShopCategory()
	})
	const isShowMore = ref(false)

	const goodsSelectActive=ref(0)
	
	//改变分类
	const changeCategory=(type,value)=>{
		if(type==1){
			if(value==shopProduct.shopPrimaryCategoryId){
				shopProduct.shopPrimaryCategoryId=-1
				shopProduct.shopSecondaryCategoryId=-1
			}else{
				shopProduct.shopPrimaryCategoryId=value
				shopProduct.shopSecondaryCategoryId=-1
			}
		}else if(type==2){
			if(value==shopProduct.shopSecondaryCategoryId){
				shopProduct.shopSecondaryCategoryId=-1
			}else{
				shopProduct.shopSecondaryCategoryId=value
			}
		}else{
			if(value==shopProduct.shopPrice){
				shopProduct.shopPrice=-1
			}else{
				shopProduct.shopPrice=value
			}
		}
	}
</script>

<template>
	<div class="product-selectBox">
		<div class="goods-select">
			<div :class="goodsSelectActive===0?'goodsSelect-item active':'goodsSelect-item'" 
			@click="goodsSelectActive=0"
			>
				热销商品
			</div>
			<div :class="goodsSelectActive===1?'goodsSelect-item active':'goodsSelect-item'" 
			@click="goodsSelectActive=1"
			>
				经典名酒
			</div>
			<div :class="goodsSelectActive===2?'goodsSelect-item active':'goodsSelect-item'" 
			@click="goodsSelectActive=2"
			>
				新品上市
			</div>
		</div>
		<div class="classification-select">
			<div class="select-title">
				分类筛选
			</div>
			<div :class="index===shopProduct.shopPrimaryCategoryId?'classificationSelect-item active':'classificationSelect-item'"
				v-for="(item,index) in shopProduct.shopCategory" :key="index" @click="()=>{
					changeCategory(1,index)
				}">
				{{item.name}}
			</div>
			<div class="more-classification" @click="isShowMore=!isShowMore" v-if="shopProduct.shopPrimaryCategoryId>-1">
				<p>详细筛选</p>
				<div class="more-icon">
					<img src="@/assets/images/home-Images/doubleActive-left_1@2x.png" v-if="isShowMore"  alt="" />
					<img src="@/assets/images/home-Images/double-left 1@2x.png" v-else alt="" />
				</div>
			</div>
			<div class="classification-ordertype">
				<div :class="shopProduct.sortType===4||shopProduct.sortType===5?'ordertype-item active':'ordertype-item'"
				@click="()=>{
					let flag=shopProduct.sortType
					if(flag===4){
						shopProduct.sortType=5
					}else{
						shopProduct.sortType=4
					}
				}"
				>
					<p>价格优先</p>
					<img v-if="shopProduct.sortType===5" src="@/assets/images/home-Images/Group_3545@2x.png" alt="" />
					<img v-else src="@/assets/images/home-Images/Group_3544@2x.png" alt="" />
				</div>
				<div :class="shopProduct.sortType===2||shopProduct.sortType===3?'ordertype-item active':'ordertype-item'"
				@click="()=>{
					let flag=shopProduct.sortType
					if(flag===2){
						shopProduct.sortType=3
					}else{
						shopProduct.sortType=2
					}
				}"
				>
					<p>销量优先</p>
					<img v-if="shopProduct.sortType===2" src="@/assets/images/home-Images/Group_3545@2x.png" alt="" />
					<img v-else src="@/assets/images/home-Images/Group_3544@2x.png" alt="" />
				</div>
				<div class="ordertype-item">
					<p>好评优先</p>
					<img src="@/assets/images/home-Images/Group_3544@2x.png" alt="" />
				</div>
			</div>
		</div>
		<div class="more-more-classificationBox" v-if="isShowMore&&shopProduct.shopPrimaryCategoryId>-1">
			<div class="classification-select">
				<div class="select-title">
					酒类分类
				</div>
				<div :class="index===shopProduct.shopSecondaryCategoryId?'classificationSelect-item active':'classificationSelect-item'"
					v-for="(item,index) in shopProduct.shopCategory[shopProduct.shopPrimaryCategoryId].categories" :key="index"
					@click="changeCategory(2,index)">
					{{item.name}}
				</div>
			</div>
			<div class="classification-select">
				<div class="select-title">
					标签筛选
				</div>
				<div :class="index===0?'classificationSelect-item active':'classificationSelect-item'"
					v-for="(item,index) in 1" :key="index">
					标签名称
				</div>
			</div>
			<div class="classification-select">
				<div class="select-title">
					价格区间
				</div>
				<div :class="index===shopProduct.shopPrice?'classificationSelect-item active':'classificationSelect-item'"
					v-for="(item,index) in shopProduct.shopPriceList" :key="index" @click="changeCategory(3,index)">
					{{item.name}}
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang='scss'>
	@media (max-width: 1522px) {
	   .classificationSelect-item {
			box-sizing: border-box;
			padding: 16px 27px;
			background: #FFFFFF;
			border-radius: 3px 3px 3px 3px;
			border: 1px solid #F4F4F4;
			text-align: center;
			margin-right: 10px !important;
			font-weight: bold;
			font-size: 21px;
			color: #1A1E26;
			cursor: pointer;
			&.active {

				background: rgba(195, 13, 35, 0.1);
				border-radius: 3px 3px 3px 3px;
				border: 1px solid #C30D23;
				color: #C30D23;
			}
		}
	}
	@media (max-width: 1750px) {
	    .classificationSelect-item {
			box-sizing: border-box;
			padding: 16px 27px;
			background: #FFFFFF;
			border-radius: 3px 3px 3px 3px;
			border: 1px solid #F4F4F4;
			text-align: center;
			margin-right: 10px !important;
			font-weight: bold;
			font-size: 21px;
			color: #1A1E26;
			cursor: pointer;
			
			&.active {

				background: rgba(195, 13, 35, 0.1);
				border-radius: 3px 3px 3px 3px;
				border: 1px solid #C30D23;
				color: #C30D23;
			}
		}
	}
	.product-selectBox {
		width: 100%;
		border-bottom: 1px solid #F4F4F4;
		

		.goods-select {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 87px 0 40px 0;

			.goodsSelect-item {
				width: 505px;
				height: 64px;
				border-radius: 3px 3px 3px 3px;
				border: 1px solid #333333;
				background-color: #fff;
				text-align: center;
				line-height: 64px;
				color: #333333;
				font-weight: bold;
				font-size: 21px;

				&.active {
					background: #C30D23;
					border: 1px solid #C30D23;
					color: #FFFFFF;
				}
			}
		}

		.classification-select {
			width: 100%;
			height: 64px;
			display: flex;
			margin-bottom: 43px;
			align-items: center;

			.select-title {
				line-height: 64px;
				font-weight: 400;
				font-size: 32px;
				color: #1A1E26;
				margin-right: 53px;
			}

			.classificationSelect-item {
				box-sizing: border-box;
				padding: 16px 27px;
				background: #FFFFFF;
				border-radius: 3px 3px 3px 3px;
				border: 1px solid #F4F4F4;
				text-align: center;
				margin-right: 67px;
				font-weight: bold;
				font-size: 21px;
				color: #1A1E26;
				cursor: pointer;
				&.active {

					background: rgba(195, 13, 35, 0.1);
					border-radius: 3px 3px 3px 3px;
					border: 1px solid #C30D23;
					color: #C30D23;
				}
			}

			.more-classification {
				width: 187px;
				height: 64px;
				background: #FFFFFF;
				border-radius: 3px 3px 3px 3px;
				border: 1px solid #F4F4F4;
				padding: 16px 27px;
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				font-size: 21px;
				color: #1A1E26;
			}

			.classification-ordertype {
				float: right;
				height: 28px;
				flex: 1;
				display: flex;
				justify-content: end;

				.ordertype-item {
					height: 28px;
					font-family: Lexend, Lexend;
					font-weight: 400;
					font-size: 19px;
					color: #1A1E26;
					line-height: 28px;
					margin-left: 27px;
					display: flex;
					align-items: center;
					cursor: pointer;
					img{
						width: 15px;
						height: 17px;
						margin-left: 4px;
					}
					&.active{
						color: rgba(195, 13, 35, 1);
					}
				}
			}
		}
	}
</style>